<template>
  <m-window-frame
    :title="$t('导出')"
    style="height: 100%"
    :okLoading="saveLoading"
    :ok-text="$t('导出')"
    :cancel-text="$t('关 闭')"
    class="v-hgs-export"
    @cancel="handleCancel"
    @ok="handleSave"
  >
    <div class="hgs-export-container">
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="form"
        label-width="85px"
        :hide-required-asterisk="true"
      >
        <el-form-item
          label="任务"
          prop="owner"
        >
          <el-row :gutter="12">
            <el-col :span="24">
              <div class="g-ai-c g-flex-auto ownerBox g-one-line">
                <img
                  v-if="form.owner.icon"
                  :src="form.owner.icon"
                  width="16"
                  height="16"
                  style="margin-right: 4px"
                  onerror="this.src='statics/images/sysml/Stereotype.svg'"
                  alt=""
                />
                <span class="text g-one-line">{{ form.owner.label }}</span>
                <img
                  src="statics/icons/app/iconmore.png"
                  class="_btn"
                  @click="selectOwner"
                />
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </m-window-frame>
</template>
<script lang="ts" setup>
import MWindowFrame from "@/common/ipcWindow/WindowFrame.vue";
import { ref, watch, reactive } from "vue";
import { Params, CloseData } from "./index";
import { useRoute } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { ipcWindowUtil } from "@/mdesign-lib/mdesign-app.umd.js";
import { locale } from "@/mdesign-lib/mdesign-app.umd.js";
import { modelTreeSelectWindow } from "@/mdesign-lib/mdesign-app.umd.js";
import { PropertyDataType } from "@/mdesign-lib/mdesign-app.umd.js";
import { modelService } from "@/mdesign-lib/mdesign-app.umd.js";

import { ipcRenderer } from "electron";
import { IpcMsg } from "@/mdesign-lib/mdesign-main.js";

ipcRenderer.on(IpcMsg.WindowAbort, () => (saveLoading.value = false));

interface OptionItem {
  label: string;
  value: string;
  icon?: string;
}

const form = reactive<Record<string, any>>({
  owner: {
    value: "",
    label: "",
    icon: ""
  }
});

const rules = reactive<FormRules>({
  owner: [
    {
      required: true,
      validator: (rule, value: OptionItem, cb) => {
        if (!value.value) {
          return cb(new Error(locale.t("请选择所有者元素")));
        } else {
          cb();
        }
      }
    }
  ]
});

const saveLoading = ref(false);
const ruleFormRef = ref<FormInstance>();
let projectId = "";
const route = useRoute();

watch(
  () => route.fullPath,
  () => {
    const routeQuery = route.query as unknown;
    const query = routeQuery as Params;
    projectId = query.projectId;
  },
  { immediate: true }
);

const selectOwner = async () => {
  const result = await modelTreeSelectWindow.popup({
    loadMethod: "getPropertyTreeList",
    loadParams: JSON.stringify({
      row: {
        modelId: "",
        key: "",
        dataType: PropertyDataType.INSTANCE,
        moreBtnCondition: "74643087793460608",
        isMultiplicity: false,
        checkMethod: "",
        updateMethod: ""
      },
      projectId
    }),
    selectedId: form.owner.value,
    attrTip: "radio",
    title: "选择元素",
    delay: false,
    showNodeLabel: true,
    nullable: false,
    disableReadonlyNode: true
  });
  if (result.success) {
    const selectedId = result.selectedId as string;
    if (selectedId !== form.owner.value) {
      const typeModel = await modelService.getModelData(projectId, selectedId);
      form.owner = {
        value: typeModel.id,
        label: typeModel.name,
        icon: typeModel.icon
      };
    }
  }
};

const handleSave = async () => {
  if (!ruleFormRef.value) return;
  const valid = await ruleFormRef.value.validate().catch(() => false);
  if (!valid) return;
  saveLoading.value = true;
  ipcWindowUtil.sendWindowChange({ success: true, owner: form.owner.value });
};

function handleclose(data: CloseData) {
  saveLoading.value = false;
  ipcWindowUtil.closeWindow(data);
}
function handleCancel() {
  handleclose({ success: false });
}
</script>
<style lang="scss">
.v-hgs-export {
  flex: 1;
  display: flex;
  overflow: hidden;
  .hgs-export-container {
    flex: 1;
    overflow: hidden;
    padding: 32px;
    .el-form-item {
      height: 32px;
      margin-bottom: 14px;
      .el-form-item__label {
        line-height: 32px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .el-input__wrapper {
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-shadow: none;
        input {
          height: 24px;
        }
      }
      .el-select {
        width: 100%;
        .el-select__icon {
          transform: rotate(0);
          width: 20px;
        }
      }
      .el-button {
        border-color: rgba(0, 0, 0, 0.15);
        padding: 8px;
        border-radius: 0;
        &:hover {
          border-color: var(--md-primary-color);
        }
      }
      .ownerBox {
        height: 28px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        position: relative;
        padding-left: 7px;
        padding-right: 34px;
        ._btn {
          position: absolute;
          display: inline-block;
          cursor: pointer;
          top: 50%;
          right: 7px;
          transform: translateY(-50%);
        }
      }
    }

    .el-row {
      width: 100%;
      .el-col {
        min-height: 32px;
        display: flex;
        align-items: center;
      }
    }
    .interface-path-box {
      position: relative;
      .el-input__wrapper {
        padding-right: 34px;
        box-shadow: none !important;
      }
      ._btn,
      .dropdown-box {
        position: absolute;
        display: inline-block;
        cursor: pointer;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
      }
      .el-input__suffix {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
      }
      .dropdown-file-box {
        width: 100%;
        border: 1px solid rgba(0, 0, 0, 0.15);
        height: 28px;
        .c-dropdown {
          width: 100%;
          height: 100%;
        }
        .dropdown-file-content-box {
          height: 100%;
          display: flex;
          align-items: center;
        }
      }
    }
    .gray-text {
      color: gray;
    }
  }
}
</style>
